<template>
  <div class="echarts" ref="echartsRef" :style="{
    width: '300%',
    height: '50px'
  }"></div>

</template>

<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
  setup() {
    const echartsRef = ref<HTMLElement>()
    onMounted(() => {
      //初始化echarts实例init（ dom ，'主题' ，其余参数如：{ renderer:'svg' }）
      const myEcharts = echarts.init(echartsRef.value!)
      //要操作的配置
      const option = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: 'TODONOW',
                fontSize: 50,
                fontWeight: 'bold',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'transparent',
                stroke: '#0000',
                lineWidth: 1
              },
              keyframeAnimation: {
                duration: 3000,
                loop: true,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      fill: 'black'
                    }
                  }
                ]
              }
            }
          ]
        }
      }
      //设置配置
      myEcharts.setOption(option)
    })

    return { echartsRef }
  }

})
</script>

<style>

</style>